<script setup>
import { ref, reactive } from 'vue'
import { Icon, LoadingPlugin, MessagePlugin } from 'tdesign-vue-next'
import { loginByPassword } from '../../../api/api.js'
import { useAuthStore } from '@/stores/AuthToken'
import router from '../../../router/index'

const authStore = useAuthStore()

const form = ref()
const formData = reactive({
  username: '',
  password: ''
})
// const userStore = useUserStore()
const isRemember = ref(false)

// 效验规则
const rules = {
  username: [
    { required: true, message: '请输入账号', type: 'error', trigger: 'blur' },
    { required: true, message: '请输入账号', type: 'error', trigger: 'change' },
    { whitespace: true, message: '用账号不能为空' },
    { min: 6, message: '账号格式错误', type: 'error', trigger: 'blur' },
    { max: 15, message: '账号格式错误', type: 'error', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', type: 'error', trigger: 'blur' },
    { required: true, message: '请输入密码', type: 'error', trigger: 'change' },
    { whitespace: true, message: '密码不能为空' },
    { min: 8, message: '密码格式错误', type: 'error', trigger: 'blur' },
    { max: 15, message: '密码格式错误', type: 'error', trigger: 'blur' }
  ]
}

// 登录
const login = () => {
  form.value.validate().then((res) => {
    if (res != true) return
    loginByPassword(formData).then((res) => {
      // 清空token
      authStore.clearAuth()
      authStore.initAuth(res)
      const instance = LoadingPlugin({
        fullscreen: true,
        attach: 'body',
        preventScrollThrough: false
      })
      MessagePlugin.success({
        content: '您已登录成功！即将为您转入主页',
        placement: 'top',
        onDurationEnd: () => {
          const timer = setTimeout(() => {
            instance.hide()
            clearTimeout(timer)
          }, 900)
          router.push('/')
        }
      })
    })
  })
}
</script>

<template>
  <t-space direction="vertical" class="space">
    <t-form ref="form" :data="formData" :rules="rules" :colon="true" :label-width="0">
      <t-form-item name="username">
        <t-input
          v-model="formData.username"
          class="input"
          size="large"
          clearable
          placeholder="请输入您的账号"
        >
          <template #prefix-icon>
            <icon name="user-1" />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item name="password">
        <t-input
          v-model="formData.password"
          class="input"
          size="large"
          type="password"
          clearable
          placeholder="请输入您的密码"
        >
          <template #prefix-icon>
            <icon name="lock-on" />
          </template>
        </t-input>
      </t-form-item>

      <div class="space-div">
        <t-checkbox v-model:checked="isRemember" allow-uncheck> 记住密码 </t-checkbox>
        <t-link theme="primary" style="margin-left: auto">找回账号</t-link>
      </div>
      <t-form-item>
        <t-button
          @click="login"
          size="large"
          type="submit"
          block
          style="width: 100%; margin: 15px 0"
        >
          登录
        </t-button>
      </t-form-item>
    </t-form>
    <t-space style="margin: 5px 0">
      <t-link theme="primary" @click="router.push('/login/byQRCode')">使用微信扫一扫登录</t-link>
      <t-divider layout="vertical" />
      <t-link theme="primary" @click="router.push('/login/byAuthCode')">使用邮箱验证码登录</t-link>
    </t-space>
    <p style="color: rgb(126, 126, 126)">Copyright @ 2023 RadianceM K2-410. All Rights Reserved</p>
  </t-space>
</template>

<style scoped lang="scss">
@import '../../../style/common.scss';
.space {
  position: relative;
  @include cf;
  width: 85%;
  padding: 0;
  margin: 15px 0px;

  .input {
    position: relative;
    width: 100%;
  }
  .text {
    margin: 10px 0;
  }
  .space-div {
    position: relative;
    @include cf;
    flex-direction: row;
    width: 100%;
  }
}
</style>
